<template>
	<u-popup
		:customStyle="{ bottom: bottom_height }"
		:show="show"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		round="16"
	>
		<view class="popup_con">
			<view class="fixedTitle_equip">
				<view class="left"></view>
				<view class="middle">已选装备</view>
				<view class="right">
					<u-icon
						@click="closeMore"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>
			<view class="container_equip">
				<view class="title">总数量({{ buyList.length || 0 }})</view>
				<view class="list" v-for="(item, index) in buyList">
					<view>
						{{
							item.materialName ||
							item.offeringName ||
							item.decorationName ||
							item.name
						}}
					</view>
					<view>
						{{ item.price == 0 ? '免费' : item.price + '福币' }}
					</view>
					<view>{{ item.lifespan==0?'永久': item.lifespan+'天' }}</view>
					<view class="CC">
						<u-icon
							@click="del(item, index)"
							class="close"
							name="close"
							color="black"
							size="20"
						></u-icon>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
import store from '@/store/index.js'; //需要引入store
import { defineEmits, defineProps, ref } from 'vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
const props = defineProps(['bottom_height', 'buyList']);
const emit = defineEmits(['del']);
const show = ref(false);
// let height = ref(0)
// const sendHeight = ((e) => {
// 	height.value = e + 'px'
// })
const closeMore = () => {
	show.value = false;
	store.state.userInfo.flag = false;
};
const del = (item, index) => {
	props.buyList.splice(index, 1);
	emit('del', {
		id: item.id || item.offeringId,
		buyList: props.buyList
	});
};
defineExpose({
	show
});
</script>

<style lang="scss">
.popup_con {
	background: linear-gradient(180deg, rgba(255, 234, 195, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
		#ffffff;
	border-radius: 32rpx 32rpx 0 0;
}

.fixedTitle_equip {
	width: 100%;
	font-size: 32rpx;
	color: #0e0e0e;
	padding: 32rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.container_equip {
	padding: 0 48rpx;
	// height: 300rpx;
	max-height: 60vh;
	min-height: 25vh;
	overflow: auto;

	.title {
		font-size: 32rpx;
		padding-bottom: 38rpx;
	}

	.list {
		padding-bottom: 44rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 30%;
		}

		.CC {
			width: 40rpx;
		}
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}
</style>
